<template>
	<view>
		<view class="workList">
			<view class="work-title">
				{{workList.word}}
			</view>
			
			<view class="work-mean">
				释义: {{workList.mean}}
			</view>
			<view class="example">
				<p>例句: </p>
				<view class="work-cnExample">
					{{workList.cnExample}}
				</view>
				<view class="work-enExample">
					{{workList.enExample}}
				</view>
			</view>
			<view>
				<image class="imgExample" :src="(workList.imgUrls)?workList.imgUrls[0]:''" mode="aspectFit"></image>
			</view>
			<view class="work-time">
				最近更新时间<uni-dateformat :date="workList.time" :threshold="[60000, 3600000]"></uni-dateformat>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				workList:{}
			};
		},
		onLoad(e) {
			this.getWorkById(e)
		},
		methods:{
			getWorkById(id){
				uniCloud.callFunction({
					name:'get-work-by-id',
					data:id,
				}).then(data=>{
					if(data.result.affectedDocs){
						this.workList = data.result.data[0]
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.workList{
	// height: 500rpx;
	// border: 2px solid red;
	 display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 50rpx 16rpx;
	padding: 8px;
	box-shadow: 1rpx 1rpx 8rpx  cadetblue;
	.work-title{
		margin: 40rpx 0 40rpx;
		text-align: center;
		font-size: 60rpx;
	}
	.work-time{
		font-size: 20rpx;
		color: darkgray;
		margin: 0 0 0 280rpx;
	}
	.example{
		margin: 50rpx 0;
	}
	.work-cnExample{
		// margin: 30rpx 0;
	}
	.imgExample{
		height: 120rpx;
		width: 120rpx;
	}
}
</style>
